<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="https://unpkg.com/bpmn-js/dist/bpmn-viewer.development.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html {
            height: 100vh;
            width: 100vw;
        }

        .item {
            width: 120px;
        }
    </style>
</head>

<body>
    <div id="app">
        wtf
    </div>
    <div id="canvas"></div>
    <script>
        // the diagram you are going to display
        let bpmnXML;

        // BpmnJS is the BPMN viewer instance
        const viewer = new BpmnJS({ container: '#canvas' });

        const fn = async () => {
            await viewer.importXML(bpmnXML);
            viewer.get('canvas').zoom('fit-viewport');
        }

        // import a BPMN 2.0 diagram
        try {
            // we did well!
            fn()
        } catch (err) {
            // import failed :-(
        }
    </script>
    <script>
        const app = new Vue({
            el: '#app',
            template: `
                <div class="wrap">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                </div>
            `,
            data() {
                return {
                    name: 'lt'
                }
            },
            mounted() {
                console.log('this', this);
            },
            methods: {
                fn(arr) {
                    const map = new Map()
                    arr.forEach(e => {
                        const item = map.get(e.count)
                        if (!item) {
                            map.set(e.count, [e])
                        } else {
                            item.push(e)
                        }
                    })
                    console.log(map);
                    const maxVal = Math.max(...map.keys())
                    return map.get(maxVal)
                },
                // https://github.com/bpmn-io/bpmn-js-examples.git
                fn2(str1, str2) {
                    const arr1 = str1.split('.')
                    const arr2 = str2.split('.')
                    let len = Math.max(arr1.length, arr2.length)
                    let val1 = 0
                    let val2 = 0
                    for (let i = 0; i < len; i++) {
                        let t1 = arr1[i] || 0
                        let t2 = arr2[i] || 0

                        val1 += t1 * Math.pow(10, len - i)
                        val2 += t2 * Math.pow(10, len - i)
                    }
                    return val1 > val2 ? 1 : val1 === val2 ? 0 : -1
                },



                formatNumber(number) {
                    // 1234567 1,234,567  [0,3)
                    let end = number.length
                    let start = end - 3
                    const array = []
                    while (start > 0) {
                        array.push(number.slice(start, end)) // slice [left, right)
                        end -= 3
                        if (end > 3) {
                            start = end - 3
                        } else {
                            array.push(number.slice(0, end))
                            break
                        }
                    }
                    return array.reverse().join(',')
                },
            }
        })
    </script>
</body>

</html>